<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>2D转换之位移translate让盒子实现水平和垂直居中</title>
        <style>
            div {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: pink;
                /* 1. tranlate里面的参数是可以用 % */
                /* 2. 如果里面的参数是 % 移动的距离是相对于盒子自身的宽度或者高度来决定的 */
                /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
                /* transform: translateX(50%); */
            }

            p {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 200px;
                height: 200px;
                background-color: purple;
                /* 原来的写法 */
                /* margin-top: -100px;
                   margin-left: -100px; */
                /* translate(-50%, -50%)  盒子往上走自身高度的一半，往左走自身宽度的一半 */
                transform: translate(-50%, -50%);
            }

            span {
                /* translate 对于行内元素是无效的 */
                transform: translate(300px, 300px);
            }
        </style>
    </head>

    <body>
        <div>
            <p></p>
        </div>
        <span>123</span>
    </body>
</html>
